<template>
  <a-card :bordered="false" title="复诊记录">
    <a-spin :spinning="loading">
      <a-form labelAlign="left">
        <a-form-item :labelCol="{ sm: 2 }" :wrapperCol="{ sm: 4 }" label="选择日期："
          ><a-month-picker :placeholder="this.curDateTime" @change="changeVisit" :format="monthFormat"
        /></a-form-item>
      </a-form>

      <a-table
        :columns="columns"
        :data-source="data"
        style="margin-top: 10px"
        :pagination="{ pageSize: 20 }"
        :rowKey="
          (record, index) => {
            return index
          }
        "
      >
        <template v-for="col in ['flupDate', 'doctorName', 'receiver']" :slot="col" slot-scope="text, record">
          <div :key="col">
            <a-input
              v-if="record.editable"
              style="margin: -5px 0"
              :value="text"
              @change="e => handleChange(e.target.value, record.key, col)"
            />
            <template v-else>
              {{ text }}
            </template>
          </div>
        </template>

        <template slot="status" slot-scope="text, record">
          <a-badge :status="record.status | statusColor" :text="text" />
        </template>

        <template slot="operation" slot-scope="text, record, index">
          <div class="editable-row-operations">
            <span v-if="record.editable">
              <a @click="() => save(record.key)">Save</a>
              <a-popconfirm title="Sure to cancel?" @confirm="() => cancel(record.key)">
                <a>Cancel</a>
              </a-popconfirm>
            </span>
            <span v-else>
              <a-button v-if="record.status == '待复诊'" @click="viewVisitBegin(record, index)">
                复诊开始
              </a-button>
              <a-button
                v-if="record.status != '未复诊' && record.status != '待复诊'"
                @click="viewVisitDetails(record, index)"
              >
                <!-- <a-button @click="viewVisitDetails(record, index)"> -->
                查看复诊详情
              </a-button>
            </span>
          </div>
        </template>
      </a-table>

      <visit-details ref="visitDetails" @end="handleEnd"></visit-details>
    </a-spin>
  </a-card>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
import { PAGE_MENU_TYPE } from '@/store/mutation-types'
import VisitDetails from './modules/VisitDetails.vue'

const columns = [
  {
    title: '复诊时间',
    dataIndex: 'flupDate',
    width: 220
  },
  {
    title: '状态',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '医师',
    dataIndex: 'doctorName'
  },
  {
    title: '接待人',
    dataIndex: 'receiver'
  },
  {
    title: '操作',
    dataIndex: 'operation',
    width: 180,
    scopedSlots: { customRender: 'operation' }
  }
]

const data = []

export default {
  name: 'Visit',
  components: { VisitDetails },
  data() {
    this.cacheData = data.map(item => ({ ...item }))

    return {
      loading: true,
      data,
      columns,
      monthFormat: 'YYYY年M月',
      datetime: '',
      curDateTime: '',
      editingKey: '',
      queryParam: { patientId: this.$route.query[PAGE_MENU_TYPE.PatientId] }
    }
  },
  filters: {
    statusColor(item) {
      switch (item) {
        case '已复诊':
          return 'success'
          break
        case '复诊中':
          return 'processing'
          break
        case '未复诊':
          return 'default'
          break
        case '待复诊':
          return 'default'
          break
      }
    }
  },
  created() {
    this.getTime()
    this.getVisitList()
  },
  methods: {
    changeVisit(date, dateString) {
      var arr = dateString.split('年')
      var x = arr[1].split('月')

      if (x[0] < 10) {
        x[0] = '0' + x[0]
      }
      var y = arr[0] + '-' + x[0]
      this.datetime = y
      this.loading = true
      this.getVisitList()
    },
    getVisitList() {
      this.data = []
      let date = {
        patientId: this.queryParam.patientId,
        date: this.datetime
      }
      getAction('flup/patient/page', date)
        .then(res => {
          if (res.success) {
            for (let i = 0; i < res.result.total; i++) {
              this.data.push({
                flupDate: res.result.records[i].flupDate,
                organization: res.result.records[i].organization,
                status: res.result.records[i].status,
                doctorName: res.result.records[i].doctorName,
                receiver: res.result.records[i].receiver,
                flupAppointmentId: res.result.records[i].flupAppointmentId
              })
            }
          }
        })
        .finally(_ => {
          this.loading = false
        })
    },
    getTime() {
      var myDate = new Date()
      var tYear = myDate.getFullYear()
      var tMonth = myDate.getMonth()

      var m = tMonth + 1

      this.datetime = tYear + '-' + m
      this.curDateTime = tYear + '年' + m + '月'
    },
    handleChange(value, key, column) {
      const newData = [...this.data]
      const target = newData.filter(item => key === item.key)[0]
      if (target) {
        target[column] = value
        this.data = newData
      }
    },
    edit(key) {
      const newData = [...this.data]
      const target = newData.filter(item => key === item.key)[0]
      this.editingKey = key
      if (target) {
        target.editable = true
        this.data = newData
      }
    },
    save(key) {
      const newData = [...this.data]
      const newCacheData = [...this.cacheData]
      const target = newData.filter(item => key === item.key)[0]
      const targetCache = newCacheData.filter(item => key === item.key)[0]
      if (target && targetCache) {
        delete target.editable
        this.data = newData
        Object.assign(targetCache, target)
        this.cacheData = newCacheData
      }
      this.editingKey = ''
    },
    cancel(key) {
      const newData = [...this.data]
      const target = newData.filter(item => key === item.key)[0]
      this.editingKey = ''
      if (target) {
        Object.assign(target, this.cacheData.filter(item => key === item.key)[0])
        delete target.editable
        this.data = newData
      }
    },
    viewVisitDetails(record, index) {
      let date = {
        id: this.data[index].flupAppointmentId,
        status: record.status
      }
      this.$refs.visitDetails.view(date)
    },
    viewVisitBegin(record, index) {
      let date = {
        id: this.data[index].flupAppointmentId,
        status: record.status
      }
      const params = {
        flupId: this.data[index].flupAppointmentId,
        type: 1
      }
      postAction('/flup/patient/status/update', params).then(res => {
        if (res.success) {
          this.$message.success(res.message)
          this.getVisitList()
          this.$refs.visitDetails.view(date)
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    handleEnd() {
      this.getVisitList()
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.ant-form-item {
  margin-bottom: 0;
}
.picker-label {
  height: 100%;
  line-height: 100%;
}
.editable-row-operations a {
  margin-right: 8px;
}
.evalutionTitle {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
}
.ant-table-bordered .ant-table-thead > tr > th,
.ant-table-bordered .ant-table-tbody > tr > td {
  text-align: center;
}
.ant-input::-webkit-input-placeholder {
  color: rgb(0, 0, 0, 0.65);
}
.ant-card-head {
  background-color: #fafafa;
}
</style>

